<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8">
    <title>PHPNAV</title>
</head>

<body style=" background-color: #202020;">
    <!-- 页顶 -->
    <div class="hx" style="width:100%; height: 10vh; background-color: #555555;">
        <!-- ioc -->
        <div style="width: 260px; height:100%">

        </div>

        <!-- 搜索 -->
        <div class="sxjz zyjz" style="width: 900px; height:100%;">


            <div>
                <form action="https://www.baidu.com/baidu" method="_blank">
                    <input type="text" name="word" size="60" placeholder="输入搜索词">
                    <input type="submit" value="百度搜索">
                </form>
            </div>


        </div>
        <!-- 菜单 -->
        <div style="height: 100%;">



        </div>



    </div>
    <!-- 目录 -->
    <div class="hx" style="width: 100%; height: 90vh;">
        <div class="zyjz sxjz" style="width: 15%; height:100%;">
            <div style="width: 200px; height:80vh; min-width: 150px; min-height: 600px; background-color: #550055; border-radius: 5px;">
            <?php 
            for($i=0;$i<=2;$i++) {
                echo '<div class="ml" href="www.baidu.com">' . $i . '</div>' ; 
                } 
            ?>

            </div>
            
        </div>
        <!-- 导航 -->
        <div class="zyjz sxjz" style="width: 85%; height:100%;">
            <div style="width:99%; height:99%; background-color: #555555; border-radius: 5px;">
            <?php 
            for($i=0;$i<=2;$i++) {
                echo '<div class="bq" href="www.baidu.com">' . $i . '</div>' ; 
                } 
            ?>

            </div>

        </div>

    </div>

</body>

</html>